<template>
  <div>
    <el-button @click="drawerVisible = true">打开抽屉</el-button>

    <zz-Drawer
      v-model="drawerVisible"
      title="基础抽屉"
      @confirm="handleConfirm"
      @cancel="handleCancel"
    >
      <el-button @click="dialogVisible = true">打开弹窗</el-button>
    </zz-Drawer>

    <zz-Dialog
      v-model="dialogVisible"
      title="基础弹窗"
      @confirm="handleConfirm"
      @cancel="handleCancel"
    >
      <p>这是弹窗内容</p>
    </zz-Dialog>
  </div>
</template>

<script setup>
import { ref } from "vue";
import zzDrawer from "@/components/zzDrawer/index.vue";

const drawerVisible = ref(false);
const dialogVisible = ref(false);


const handleConfirm = () => {
  console.log("确认操作");
  drawerVisible.value = false;
};

const handleCancel = () => {
  console.log("取消操作");
};
</script>